// function to parse string to float
function toNumber(value) {
    return parseFloat(value);
}

// read the data
d3.dsv(";", "test-data.csv", function (d) {
    // parse the array of probabilities
    var probabilities = d.probabilities.replace(/\[|\]/g, '');
    probabilities = probabilities.replaceAll("  ", " ").replaceAll("  ", " ").replaceAll("  ", " ").split(" ").map(toNumber);
    return {
        segment: d.segment,
        id: d.id,
        sentiment: d.sentiment,
        true_label: d.true_label,
        probabilities: probabilities,
        max_probability: d3.max(probabilities)
    };
}).then(function (data) {
    // sort by certainty
    data = data.sort(function(a, b) {return a.max_probability - b.max_probability});
    console.log(data)
    // create histogram
    createHistogram(data);
    // plot predictions
    plotSentences(data);
});

// function that creates a histogram using d3 built in method
var createHistogram = function (data) {
    // list of all max probabilities (i.e., probability for the predicted label)
    var probabilities = d3.map(data, function (d) {
        return d.max_probability;
    });

    // svg size parameters
    var margin = {top: 10, right: 30, bottom: 30, left: 40},
        width = 460 - margin.left - margin.right,
        height = 200 - margin.top - margin.bottom;

    // select the svg object
    var svg = d3.select("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform",
            "translate(" + margin.left + "," + margin.top + ")");

    // x scale
    var x = d3.scaleLinear()
        .domain([0, 1])
        .range([0, width]);

    // append x axis
    svg.append("g")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x));

    // set the parameters for the histogram
    var histogram = d3.histogram()
        .value(function (d) {
            return d;
        })
        .domain(x.domain())  // the domain of the graphic
        .thresholds(x.ticks(20)); // the numbers of bins

    // get the bins
    var bins = histogram(probabilities);

    // Y axis: scale and draw
    var y = d3.scaleLinear()
        .range([height, 0])
        .domain([0, d3.max(bins, function (d) {
            return d.length;
        })]);

    // append y axis
    svg.append("g")
        .call(d3.axisLeft(y));

    // append the bar rectangles to the svg element
    svg.selectAll("rect")
        .data(bins)
        .enter()
        .append("rect")
        .attr("x", 1)
        .attr("transform", function (d) {
            return "translate(" + x(d.x0) + "," + y(d.length) + ")";
        })
        .attr("width", function (d) {
            return x(d.x1) - x(d.x0);
        })
        .attr("height", function (d) {
            return height - y(d.length);
        })
        .style("fill", "#69b3a2")
        .style("stroke", "white")
        .style("stroke-width", 1);

    // append text labels
    svg.selectAll(".bin")
        .data(bins)
        .enter()
        .append("text")
        .text(function (d) {
            return d.length
        })
        .attr("x", 1)
        .style("font-weight", "bold")
        .style("font-size", 10)
        .attr("transform", function (d) {
            return "translate(" + x(d.x0) + "," + y(d.length) + ")";
        });
};

// create line break
var createLineBreak = function () {
    return document.createElement("br")
};

// function to list predictions, sorted to their probability
var plotSentences = function (data) {
    var sentenceContainer = document.getElementById("sentences");
    // wrong predictions
    sentenceContainer.appendChild(createLineBreak());
    sentenceContainer.append("WRONG PREDICTIONS:");
    sentenceContainer.appendChild(createLineBreak());
    data.forEach(function (value) {
        if (value.true_label !== value.sentiment) {
            sentenceContainer.append(value.segment + " (ground truth: " + value.true_label.toUpperCase() + " predicted: " + value.sentiment.toUpperCase() + " probability: " + value.max_probability.toFixed(3) + ")");
            sentenceContainer.appendChild(createLineBreak());
        }
    });

    // correct predictions
    sentenceContainer.appendChild(createLineBreak());
    sentenceContainer.append("CORRECT PREDICTIONS:");
    sentenceContainer.appendChild(createLineBreak());
    data.forEach(function (value) {
        if (value.true_label === value.sentiment) {
            sentenceContainer.append(value.segment + " (ground truth: " + value.true_label.toUpperCase() + " predicted: " + value.sentiment.toUpperCase() + " probability: " + value.max_probability.toFixed(3) + ")")
            sentenceContainer.appendChild(createLineBreak());
        }
    });
};